
<template>
  <div class="tablePadding">
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      border
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        v-for="(item, index) in headerData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <span v-if="!item.slot">{{ scope.row[item.prop] }} </span>
          <slot :name="item.prop" v-bind:row="scope.row"></slot>
        </template>
      </el-table-column>

      <el-table-column label="操作" header-align="center">
        <template slot-scope="scope">
          <slot
            name="menu"
            v-bind:row="scope.row"
            v-bind:index="scope.$index"
          ></slot>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        class="page-box"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    // 有分页时候显示的总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 该组件是否需要显示分页
    pagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 子组件接收的名字：{}
    headerData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    tableData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    // 带斑马纹表格 可以带可以不带 根据父组件传子组件决定
    // 带边框表格 可以带可以不带 根据父组件传子组件决定
    // 是否固定表头
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    handleClick(row) {
      let _self = this;
      // this.$emit("父组件接收的名字",&第二个参数可不填用不到的话&传递给父组件的数据)
      // 子组件王父组件触发时间并且传递参数 用$emit
      _self.$emit("del", row.$index);
    },
    handleSizeChange(val) {
      let _self = this;
      // console.log(`每页 ${val} 条`);
      // 回去切换一页显示多少条
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // val当前切换的第几页
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
  },
};
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>
